<template>
  <div>
    <!-- 按钮 -->
    <div class='options'>
      <el-button type="primary" size='mini' @click='toAdd'>添加</el-button>
      <div>
        <el-input size='mini'  v-model="queryParams.status" placeholder="请输入状态"></el-input>
      </div>
        <el-button size='mini' type="primary" @click="toSearch">查询</el-button>
    </div>
    <!-- 表格 -->
    <div class='tables'>
      <!-- table.style.height='100px' -->
      <el-table border size='mini' :data="orderData" height="calc(100vh - 150px)" stripe style="width: 100%">
        <!-- <el-table-column type=index  prop="" label="编号" width="180">
        </el-table-column> -->
        <el-table-column prop="id" label="订单编号" width="180">
        </el-table-column>
        <el-table-column prop="orderTime" label="下单时间">
        </el-table-column>
        <el-table-column prop="total" label="总价">
        </el-table-column>
        <el-table-column prop="status" label="状态">
        </el-table-column>
        <el-table-column prop="customerId" label="顾客ID">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button @click="toDetail(scope.row)" type="text" size="mini">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div>
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="queryParams.page"
      :page-sizes="[50, 100, 150]"
      :page-size="queryParams.pageSize"
      layout="total,sizes, prev, pager, next"
      :total="total">
    </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
export default {
  data() {
    return {
      queryParams:{
        page:'1',
        pageSize:'50',
        total:''
      }
    };
  },
  computed: {
    ...mapGetters('order',['total','orderData'])
  },
  methods: {
    ...mapActions('order',['findAll']),
    //查询
    toSearch(){
      this.findAll(this.queryParams)
    },
    //每页条数发生变化处理函数
    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        //改数据模型中的pageSize,设置page为1，发起请求
        this.queryParams.pageSize=val;
        this.queryParams.page=1;
        this.findAll(this.queryParams);
      },
      //当页码发生变化的时候
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        //修改数据模型中的数据，并发起请求
        this.queryParams.page=val;
        this.findAll(this.queryParams);
    }
  },
  created() {
    this.findAll(this.queryParams)
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
  .options{
      overflow: hidden;
  }
  .options > * {
    // overflow: hidden;
    float:left;
    margin-right:10px;
    margin-bottom: 10px;
     & > div {
    width:200px;
   }
  }
</style>